<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>新增</title>
    <meta
      name="viewport"
      content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"
    />
    <link href="../../../../css/mui.min.css" rel="stylesheet" />
    <link href="../../css/common.css" rel="stylesheet" />
    <link href="../../css/helper.css" rel="stylesheet" />
    <style>
      .mui-content {
        padding-top: 61px !important;
        padding-left: 13px;
        padding-right: 13px;
        margin-bottom: 15px;
        background-color: #fff;
      }
      .mui-content p {
        text-align: justify;
      }

      .file-pre-box {
        height: 443px;
        background: #f5f6f7;
        border: 1px solid #034880;
      }

      .file-pre {
        /* height: 443px; */
        /* padding-left:20px;
        padding-right:20px;
        background: #F5F6F7;
        border: 1px solid #034880; */
      }

      .img-tool-box {
        height: inherit;
        min-width: 33px;
      }

      .img-tool {
        width: 19px;
        height: 19px;
        margin-top: 10px;
      }
      .tits {
        display: inline-block;
        padding: 10px 0;
      }
      .shares {
        display: flex;
        justify-content: space-between;
        padding: 20px 0;
        margin-bottom: 80px;
      }
      .shares .txt {
        padding: 10px 0;
      }
      .toggers {
        display: flex;
        padding: 5px 0;
      }
      .toggers .mui-switch {
        margin-left: 20px;
      }
      .fixed-btn {
        position: fixed;
        width: 100%;
        bottom: 0;
        z-index: 9999;
      }
      .imgss img {
        width: 100%;
      }
      .signs {
        display: inline-block;
        width: 160px;
        height: 160px;
        border: solid 1px #3188fe;
        border-radius: 5px;
        margin-right: 10px;
        margin-bottom: 10px;
        position: relative;
        /* background-color: #D4E6FF; */
      }
      .signs img {
        width: 100%;
        height: 100%;
      }
      .uploads {
        display: inline-block;
        width: 160px;
        height: 160px;
        /* border-radius: 5px; */
        background: url(../../img/task/dianjipaizhao.png) no-repeat;
        background-size: 100%;
        margin-bottom: 20px;
      }
      .signs .action-delete {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(0, 0, 0, 0.5);
        text-align: center;
      }
      .action-delete .mui-icon {
        color: #ffffff;
      }
    </style>
  </head>

  <body>
    <div id="container" v-cloak>
      <header class="mui-bar mui-bar-nav">
        <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
        <h1 class="mui-title">新增</h1>
        <!-- <div class="img-tool-box">
              <img src="../../img/xiazai.png" class="img-tool fr" style="margin-left:13px;">
              <img src="../../img/shoucang_moren.png" class="img-tool fr" style="margin-left:13px;">
            </div> -->
      </header>
      <div class="mui-content">
        <div>
          <div class="mui-input-row">
            <label>业态</label>
            <span class="tits">风机设备</span>
          </div>
          <div class="mui-input-row">
            <label>标题</label>
            <input
              type="text"
              v-model="formList.title"
              class="mui-input"
              placeholder="请输入标题"
            />
          </div>
        </div>
        <!--<div class="file-pre">
          <div class="upsign">
            <textarea
              name="text"
              id=""
              v-model="formList.txt"
              cols="30"
              rows="5"
            ></textarea>
            <div v-if="signInfo && signInfo.filePath" class="imgss">
              <span class="signs">
                <img :src="signInfo.filePath?signInfo.filePath:''" />
                <div class="action-delete" @tap="deleteImg()">
                  <span class="mui-icon mui-icon-trash"></span>
                </div>
              </span>
            </div>
            <span class="uploads" @tap="addPic()"></span>
          </div>
        </div>-->
        <div id="mytextarea">
        	
        </div>
        <div class="shares">
          <span class="txt">是否分享</span>
          <div class="toggers">
            <!-- <div class="mui-switch mui-switch-blue">
               <div class="mui-switch-handle"></div>
             </div> -->
            <div id="mySwitch" class="mui-switch mui-switch-blue mui-active">
              <div class="mui-switch-handle"></div>
            </div>
          </div>
        </div>
      </div>
      <div class="fixed-btn">
        <button type="button" @tap="saveInfo()" class="mui-btn mui-btn-primary">
          发布
        </button>
      </div>
    </div>
    <script type="text/javascript" src="../../../../js/mui.js"></script>
    <script
      type="text/javascript"
      src="../../../../js/jquery-3.2.1.min.js"
    ></script>
    <script src="../../../../js/vue.js"></script>
    <script src="../../js/mkeyplus.base.js"></script>
    <script src="../../js/uploadImage.js"></script>
    <script src="../../plugins/tinymce/js/tinymce/tinymce.min.js"text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
      mui.init()
      var typeCode = "F"
      var typeCodeName = "风机设备"
      if (window.plus) {
        plusready()
      } else {
        document.addEventListener("plusready", plusready, false)
      }
      tinymce.init({
        selector: '#mytextarea',
        toolbar: 'undo redo | bold italic | alignleft aligncenter alignright alignjustify| image | removeformat',
        plugins: 'image lists', 
        content_style: "img {max-width:100%;}",
        language:'zh_CN',
        height: '400',
        statusbar: false,
        images_upload_handler:function (blobInfo, succFun, failFun) {
          var file = blobInfo.blob();//转化为易于理解的file对象
          mui.baseApp.upLoadFile1(
            file,
            function (res) {
              console.log(res)
              succFun(mui.baseApp.serverUrl + res.data.fileDirectory)
            },
            function (err) {
              failFun('上传失败')
              console.log("err", err)
            }
          )
        }
      });
      function plusready() {
        var self = plus.webview.currentWebview()
        console.log(self.ids)
        typeCode = self.typeCode
        typeCodeName = self.typeCodeName
        vm.formList.typeCode = self.typeCode
        vm.formList.typeCodeName = self.typeCodeName
        // vm.getDetils()
      }
      let vm = new Vue({
        el: "#container",
        data: {
          form: {
            page: 1,
            size: 20,
            system: "APP",
            status: 1,
          },
          signInfo: {
            filePath: "",
          },
          formList: {
            txt: '',
            content: "",
            isShare: "1",
            title: "",
            typeCode: "F",
            typeCodeName: "风机设备",
          },
          baseUrl: mui.baseApp.serverUrl,
        },
        created: function () {
          this.getSwitch()
        },
        methods: {
          // 添加图片
          addPic(index) {
            var that = this
            mui.baseApp.chooseImg().then(res => {
              mui.baseApp.compressImage(res).then(path => {
                console.log(path)
                plus.nativeUI.showWaiting('上传中')
                mui.baseApp.upLoadFile(path, function(res) {
                  console.log(res)
                  let data = res.data
                  plus.nativeUI.closeWaiting()
                  mui.toast("上传成功")
                  that.signInfo.filePath = that.baseUrl + data.fileDirectory
                })
              })
            })
          },
          // 删除图片
          deleteImg(item, index, i) {
            var that = this
            mui.confirm(
              "确定要删除此图片吗？",
              "提示",
              ["取消", "确认"],
              function (e) {
                console.log(e.index)
                if (e.index === 1) {
                  // 确认
                } else {
                  console.log("取消删除")
                }
              },
              "div"
            )
          },
          getSwitch() {
            var isActive = $("#mySwitch").is(".mui-active")
            if (isActive) {
              this.formList.isShare = 1
              console.log("打开状态1")
            } else {
              this.formList.isShare = 0
              console.log("关闭状态2")
            }
          },
          saveInfo() {
            let than = this
            if(this.formList.title.trim() == '') {
              mui.toast('请填写标题');
              return
            }
            this.formList.content = tinyMCE.activeEditor.getContent()
            mui.baseApp.httpRequst(
              "post",
              "/app/api/knowledge/experience/add",
              this.formList,
              function (data) { 
                console.log("12", data.data)
                mui.openWindow({
                  url: "./list.html",
                })
                // than.detils=data.data
                // plus.nativeUI.closeWaiting();
              },
              function () {
                // plus.nativeUI.closeWaiting()
                console.log("获取数据失败1")
              }
            )
          },
        },
      })
      document
        .getElementById("mySwitch")
        .addEventListener("toggle", function (event) {
          if (event.detail.isActive) {
            vm.formList.isShare = 1
            console.log("你启动了开关")
          } else {
            vm.formList.isShare = 0
            console.log("你关闭了开关")
          }
        })
    </script>
  </body>
</html>
